<!DOCTYPE html>
<!--声明Thymeleaf语法-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <!--引入样式 在resources/static下-->
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        /*<![CDATA[*/
        $(function () {

            $("#btn").click(function () {
                console.log("点击登录按钮")
                // 带文件
                // var data = new FormData($("#addForm")[0]);
                // 不带文件
                var data = $("#addForm").serialize();
                var targetUrl = $("#addForm").attr("action");
                console.log(targetUrl)
                $.ajax({
                    url: targetUrl,
                    type: 'post',
                    cache: false, //上传文件不需缓存
                    async: true,
                    // processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
                    // contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
                    dataType: 'json', // 告诉服务器你期待返回的数据类型
                    data: data,
                    success: function (data) {
                        console.log("res: " + data)
                        if (data.code == 1) {
                            // 提交成功
                            console.log("success")
                            var msg = $("#btn");
                            // alert(data.msg)
                            // 清空表单
                            // $("#addForm")[0].reset();
                            // http://127.0.0.1:8088/index
                            // window.location.href = "/index";
                            // http://127.0.0.1:8088/deploy/indexJQ
                            // 可以回退回当前登录页
                            // window.location.href = "indexJQ";
                            window.location.replace("indexJQ");
                        } else {
                            // 提交失败
                            console.log("fail")
                            alert(data.msg)
                            // var msg = $("#btn");
                            // msg.after("<br><br><span style='color:red;'>提示：" + data.msg + "</span>")
                        }
                    },
                    error: function () {
                        alert("请求失败")
                    }
                })
            })
        })
        /*]]>*/
    </script>
</head>

<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <!--使用thymeleaf在页面直接获取当前时间并格式化输出 https://blog.csdn.net/J_bean/article/details/77949932-->
                <p th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd HH:mm:ss')}">
                    2009/11/20
                    <br/>
                </p>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="loginJQ">登录页</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>
                login
            </h1>
            <form id="addForm" th:action="@{/user/loginAjax}" method="post">
                <table cellpadding="0" cellspacing="0" border="0"
                       class="form_table">
                    <tr>
                        <td valign="middle" align="right">
                            账号:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" name="username"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            密码:
                        </td>
                        <td valign="middle" align="left">
                            <input type="password" class="inputgri" name="password"/>
                        </td>
                    </tr>
                </table>
                <p>
<!--                    <input type="submit" class="button" value="提交 &raquo;"/>-->
                    <input type="button" class="button" value="提交 &raquo;" id="btn"/>
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            祝您使用愉快！
        </div>
    </div>
</div>
</body>

</html>